import React, { Component } from 'react';

class Comc extends Component {
  constructor() {
    // 调用super，然后就可以使用this了
    super();
    this.state = {
      // 状态机，类似vue中的data，初始化数据
      age: 18,
      name: 'Tony'
    }
    this.fn5 = this.fn5.bind(this)
  }
  // 函数直接写在类里面
  fn1() {
    console.log(666);
  }
  fn2(age) {
    console.log(this);
    console.log(age);
  }
  fn3(e) {
    console.log(e);
  }
  fn4(age, e) {
    console.log(age);
    console.log(e);
    this.fn5()
  }
  fn5() {
    // setState第一个参数，只写需要的那几项就行，不需要写完整的对象
    // 修改state中的值，需要通过setState方法。这个函数是异步的，想要获取最新的状态，可以通过第二个参数获取。第二个参数是一个回调函数，会在修改数据后执行。
    this.setState({
      age: 20
    }, ()=>{
      console.log(this.state.age);
    });
  }
  render() {
    return (
      <div>
        <h1>{this.state.age}</h1>
        <button onClick={this.fn1}>点击-无参数</button>
        <button onClick={()=>this.fn1()}>点击-无参数</button>
        <hr />
        <button onClick={this.fn2.bind(this, this.state.age)}>点击-有参数</button>
        <button onClick={()=>this.fn2(this.state.age)}>点击-有参数</button>
        <hr />
        {/* ES5是隐式传递 */}
        <button onClick={this.fn3.bind(this)}>点击-事件对象</button>
        {/* ES6是显式传递 */}
        <button onClick={(e)=>this.fn3(e)}>点击-事件对象</button>
        <hr />
        {/* 自定义数据和事件对象都要 */}
        <button onClick={this.fn4.bind(this, this.state.age)}>点击-全都有</button>
        <button onClick={(e)=>this.fn4(this.state.age, e)}>点击-全都有</button>
        <hr />
        {/* 直接在构造函数中绑定this，其他地方可以直接调用，ES5的方式 */}
        <button onClick={this.fn5}>修改state</button>
      </div>
    );
  }
}

export default Comc;
